<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="../../yl/index.css" />
  <link rel="stylesheet" href="../../component/pear/css/pear.css" />
  <link rel="stylesheet" href="../../admin/css/other/console1.css" />

  <title>活动信息</title>
  <style>
    [v-cloak] {
      display: none;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    /* 容器布局 */
    #app {
      height: 100vh;
      display: flex;
      flex-direction: column;
    }

    .title {
      padding: 15px;
      background: #fff;
      /* box-shadow: 0 2px 12px rgba(0,0,0,0.1); */
      z-index: 1;
    }

    .body {
      flex: 1;
      display: flex;
      gap: 20px;
      padding: 15px;
      overflow: hidden;
    }

    /* 左侧导航 */
    .left {
      padding: 1%;
      flex: 0 0 280px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      overflow: auto;
    }

    /* 右侧主内容 */
    .right {
      padding: 1%;
      flex: 1;
      min-width: 300px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
    }

    /* 响应式处理 */
    @media (max-width: 768px) {
      .body {
        flex-direction: column;
        padding: 10px;
      }

      .left {
        flex: 0 0 auto;
        width: 100%;
        margin-bottom: 15px;
      }

      .el-table {
        max-height: 50vh;
      }
    }

    /* 表格容器 */
    .table-container {
      flex: 1;
      overflow: hidden;
      position: relative;
    }

    .el-table {
      height: 100% !important;
    }

    /* 分页样式 */
    .el-pagination {
      padding: 12px;
      background: #fff;
      border-top: 1px solid #eee;
    }

    .button {
      margin-left: 1%;
      min-width: 96px;
      height: 32px;
      background: #fff;
      border: 1px solid #d31805;
      border-radius: 16px;
      color: #d31805;
      cursor: pointer;
      outline: none;
    }

    .zdtype {
      background: #d31805;
      color: #fff;
      margin: 1%;
      width: 10%;
    }

    :deep(.el-select__wrapper) {
      align-items: normal;
    }

    .custom-dialog {
      padding: 20px;
    }

    .custom-dialog .dialog-header {
      text-align: center;
      padding: 15px 0;
    }

    .custom-dialog .dialog-header span {
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }

    .custom-dialog .dialog-content {
      padding: 0px 50px;


    }

    .custom-dialog .dialog-content.full-width-checkbox {
      display: block;
      padding-left: 2%;
      font-weight: bold;
      color: #333;
    }

    .custom-dialog .dialog-content .checkbox-columns {
      display: flex;
    }

    .custom-dialog .dialog-content .checkbox-columns .checkbox-column {
      width: 48%;
    }

    .custom-dialog .dialog-content .checkbox-columns .checkbox-column .custom-checkbox {
      display: block;
      margin: 8px 0;
      padding: 5px 10px;
      border-radius: 4px;
      transition: all 0.3s;
    }

    .custom-dialog .dialog-content .checkbox-columns .checkbox-column .custom-checkbox :hover {
      background-color: #f5f5f5;
    }

    .custom-dialog .dialog-footer {
      text-align: center;
      padding: 15px 0;


    }

    .custom-dialog .dialog-footer .cancel-btn {
      width: 100px;
      background: #f5f5f5;
      color: #666;
      border: none;


    }

    .custom-dialog .dialog-footer .cancel-btn:hover {
      background: #e6e6e6;
    }

    .custom-dialog .dialog-footer .confirm-btn {
      width: 100px;
      background: #d31805;
      border: none;


    }

    .custom-dialog .dialog-footer .confirm-btn:hover {
      background: #b31505;
    }

    .bg {
      /* border: 1px solid pink; */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;


      padding-top: 10px;
      border-radius: 8px;
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.17);
    }

    /* .sz{
        position: relative;
        height: 42px;
        line-height: 42px;
        color: rgba(255,255,255,1);
        font-size: 20px;
        padding: 0px 15px;
        border-radius: 2px 2px 0px 0px;
 
      }*/
    .zz {
      transition: all 0.3s ease;
      font-size: 36px;
    }

    .layui-card:hover .zz {
      transform: scale(1.05);
      color: #fff;
    }

    .top {
      height: 100px;
      padding: 15px;
    }

    .layui-card-body {
      /* border: 1px solid red; */
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      height: calc(100% - 42px);
      /* 减去标题高度 */
      /* text-align: center; */

    }

    .sz {

      /* border: 1px solid black; */
      position: relative;
      /* height: 42px;
      line-height: 42px; */
      color: rgba(255, 255, 255, 1);
      font-size: 20px;
      padding: 0 10px;
      border-radius: 2px 2px 0 0;
      text-align: center;
    }

    .zz {
      width: 100px;
      color: rgba(255, 255, 255, 1);
      font-size: 24px;
      text-align: center;
      /* display: flex; */
      justify-content: center;
      align-items: center;
      height: 100%;
    }

    .layui-card {
      /* border: 1px solid red; */
      /* 添加一个小手 */
      cursor: pointer
        /* 点击那个怎么一个阴影方便我知道我选中那个 */
    }

    .layui-card.selected {
      /* border: 2px solid #d31805; */
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
    }

    /* 二维码弹窗样式 */
    .el-dialog__body {
  padding: 30px !important; /* 增大内边距 */
  background-color: #f9f9f9; /* 浅灰色背景提升对比度 */
}
#qr-* {
  width: 256px !important;
  height: 256px !important;
  border: 10px solid #ffffff; /* 白色边框提升识别率 */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); /* 增强阴影效果 */
  margin: 0 auto 20px; /* 居中显示并添加底部间距 */
  display: block; /* 确保块级元素 */
}

/* 扫码引导样式 */
.qr-guide {
  color: #d31805;
  font-size: 14px;
  margin-bottom: 15px;
}

.qr-guide .el-icon-d-arrow-bottom {
  font-size: 24px;
  display: block;
  margin-bottom: 8px;
}
  </style>
</head>

<body>
  <div id="app" v-cloak>
    <div class="top">
      <div class="layui-row layui-col-space10" v-cloak>
        <div v-for="i in 12" :key="i" class="layui-col-xs6 layui-col-md1"
          @click="handleCardClick(i)">
          <div class="layui-card top-panel bg" :style="{backgroundColor:monthColors[i-1]}">
            <div class="sz">{{i}}月
            </div>
            <div class="layui-card-body" style="height: 50px;width: 100%;">
              <div class="layui-row layui-col-space5">
                <div class="layui-col-xs8 layui-col-md8 zz" id="value1" >
                 <!-- {{ getMonthData(i).opened }} / {{ getMonthData(i).total }} -->
                   {{ z[i]?.total || 0 }} / {{ z[i]?.Frequency || 0 }}
                </div>
              </div>
            </div>
          </div>
        </div> 
      </div>
    </div>
    <div class="body">
      <div class="left">
        <el-tree style="max-width: 600px" default-expand-all :expand-on-click-node="false" :data="treeData"
          :props="{ label:'Party_Organization_Name'}" @node-click="handleNodeClick" :expand-on-click-node="false">
          <template #default="{ node, data }">
            <div class="custom-tree-node">
              <span>{{ node.label }}</span>
            </div>
          </template>
        </el-tree>
      </div>
      <div class="right">
        <div class="title">
          <div>
            名称<el-input v-model="input" style="width: 200px;margin: 0 10px;" placeholder="请输入内容"></el-input>
            年份<el-input-number v-model="year" style="width: 150px;margin: 0 10px;" placeholder="请输入内容"></el-input-number>
            <!-- 政治面貌：
            <el-select v-model="value" placeholder="请选择" style="width: 200px">
               <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select> -->
            <el-button icon="Search" style="margin: 0; margin-right: 10px;" @click="check">查询</el-button>
            <el-button icon="Refresh" style="margin: 0; margin-right: 10px;" @click="reset">重置</el-button>
            <el-button type="primary" icon="CirclePlus" style="margin: 0; margin-right: 10px;" @click="personalAdd"
              plain round>添加</el-button>
         <!--    <el-button type="warning" icon="Download" style="margin: 0; margin-right: 10px;" 
              plain round>批量导入</el-button>
            <el-button type="success" icon="Upload" style="margin: 0; margin-right: 10px;" 
              plain round>批量导出</el-button>
            <el-button type="danger" icon="Delete" style="margin: 0; margin-right: 10px;" plain
              round>批量删除</el-button> -->
          </div>
        </div>
        <el-table id="table" border
          :data-options="JSON.stringify({ 'TableName': 'party_organization_activities','primary_key':'Party_Organization_Activity_SerialNumber'})"
          height="450" v-loading="loading" ref="multipleTable" tooltip-effect="dark" :data="Tabletdata"
          @selection-change="handleSelectionChange">
          <el-table-column min-width="180" show-overflow-tooltip v-for="column in columns" :key="column.COLUMN_NAME" :prop="column.COLUMN_NAME"
            :label="column.COLUMN_COMMENT">
            <template #scope="scope">
              <div :draggable="true" @dragstart="dragStart(scope.$index)" class="draggable-row">
                {{ scope.row[column.prop] }}
              </div>
            </template>
          </el-table-column>
          <el-table-column width="100" fixed="right" align="center" label="状态">
            <template v-slot="{row}">
              <el-tag :type="isStatus(row).value">{{isStatus(row).label}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="180">
            <template #default="scope">
              <div style="display: flex; align-items: center;">
                <el-button size="small" style="margin-right: 10px;" @click="handlexq(scope.$index, scope.row)">扫码入会</el-button>
              <el-dropdown trigger="click">
                <el-button size="small" type="danger">
                  更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="huir(scope.$index, scope.row)">
                      会议人员
                    </el-dropdown-item>
                    <!-- <el-dropdown-item @click="canh(scope.$index, scope.row)">
                      手动录入
                    </el-dropdown-item> -->
                    <el-dropdown-item v-if="scope.row.Activity_isEdit == '0'" @click="handleEdit(scope.$index, scope.row)">编辑</el-dropdown-item>
                    <el-dropdown-item v-else-if="scope.row.Activity_isEdit == '1'" @click="handleEdit1(scope.$index, scope.row)">会议记录</el-dropdown-item>
                    <el-dropdown-item v-else-if="scope.row.Activity_isEdit == '2'" @click="handleEdit2(scope.$index, scope.row)">查看会议记录</el-dropdown-item>
                    <el-dropdown-item @click="handleDelete(scope.row)">
                      删除
                    </el-dropdown-item>
                    <el-dropdown-item @click="handletx(scope.row)">
                      提醒
                    </el-dropdown-item>
                    <el-dropdown-item @click="xinwen(scope.row)">
                      新闻发布
                    </el-dropdown-item>
                    <el-dropdown-item @click="xinwenjilu(scope.row)">
                      新闻发布记录
                    </el-dropdown-item>
                    <!-- <el-dropdown-item :disabled="scope.row.total == 0" @click="qianc(scope.$index, scope.row)">
                      全员签出
                    </el-dropdown-item> -->
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="margin-top: 1%;" :current-page="page.PageNumber" :page-size="page.RowAmount"
          layout="total, sizes, prev, pager, next, jumper" :total="Total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
  <el-dialog v-model="QR_code" title="活动详情" width="350" v-cloak>
  <div style="text-align: center;">
    <div class="qr-container">
      <img :id="'qr-' + currentActivity?.Party_Organization_Activity_SerialNumber" 
           style="width: 256px; height: 256px;">
      <div class="qr-guide">
        <i class="el-icon-d-arrow-bottom"></i>
        扫描二维码查看活动详情
      </div>
    </div>
    <!-- <p style="margin: 15px 0; color: #666;">活动链接</p>
    <el-input v-model="currentActivity.url" disabled style="width: 280px; margin-bottom: 15px;"></el-input>
    <p style="color: #999; font-size: 12px;">若扫码失败，可复制上方链接到浏览器打开</p> -->
  </div>
  <!-- <template #footer>
    <div class="dialog-footer">
      <el-button @click="regenerateQRCode">重新生成二维码</el-button>
      <el-button @click="QR_code = false">关闭</el-button>
    </div>
  </template> -->
</el-dialog>
    <!-- <el-dialog v-model="dialogTableVisible" title="签到人员" width="800">
      <div style="font-size: 18px;margin-bottom: 1%;display: flex;justify-content: center;">参会总人数<span
          style="color: #d31805;font-size: 24px;display: inline-block;margin: 0 10px;">{{Total2}}</span>/人</div>
      <el-table :data="gridData" height="550">
        <el-table-column width="180" v-for="column in hy" :key="column.COLUMN_NAME" :prop="column.COLUMN_NAME"
          :label="column.COLUMN_COMMENT">
          <template #scope="scope">
            <div :draggable="true" @dragstart="dragStart(scope.$index)" class="draggable-row">
              {{ scope.row[column.prop] }}
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="margin-top: 1%;" :current-page="currentPage" :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="Total2" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </el-dialog> -->

  </div>
  </div>
  <script src="../../yl/vue.js"></script>
  <script src="../../config/config.js"></script>
  <script src="../../utils/mixins.js"></script>
  <script src="../../yl/index.js"></script>
  <script src="../../yl/zh-cn.mjs"></script>
  <script src="../../yl/index.iife.min.js"></script>
  <script src="../../yl/jquery.min.js"></script>
<script src="../../utils/jquery.cookie.js"></script>
  <script src="../../utils/qrious.js"></script>
  <script src="../../utils/utils.js"></script>

  <script src="../../api/request.js"></script>
  <script src="./js/index.js"></script>
</body>

</html>